<script lang="ts" setup>
import { ref, h, onMounted } from "vue";
import { getInfoList, download, deleteData } from "@/api/merchant/management";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes} from "vxe-table";
import VxeUITable from "vxe-table";
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"));
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"));
const merchantsAverageDealId = ref("");
onMounted(() => {
  merchantsAverageDealId.value = route.query?.id  
});
const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "灵工姓名",
    field: "name",
    minWidth: 100
  },
  {
    title: "身份证号",
    field: "idCard",
    showOverflow: true,
    minWidth: 200
  },
  {
    title: "手机号",
    field: "phoneNumber",
    minWidth: 100
  },
  {
    title: "状态",
    field: "state",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        return [
          h(
            "span",
            {
              style: {
                color: row.state == 1 ? "#67C23A" : "#F56C6C"
              }
            },
            row.state == 1 ? "已审核" : "未审核"
          )
        ];
      }
    }
  },
  {
    title: "审核时间",
    field: "auditUserTime",
    minWidth: 100
  },
  {
    title: "驳回原因",
    field: "auditRemark",
    minWidth: 100
  }
];
const formRef = ref();

const handleInitialFormParams = () => ({
  taxSourcesId: taxSourcesId,
  merchantsInfoId: merchantsInfoId,
  merchantsAverageDealId: merchantsAverageDealId,
  state: ""
});
const autoselect = (res: any) => {
  console.log(res);
  formData.value.state = res.value;
  console.log(formData.value,'90909')
  getInfoList(formData.value).then((res: any) => {
    // reVxeGridRef.value.loadData(res.data);
    reVxeGridRef.value.loadData();
  });
};
const formItems = [
  {
    field: "state", // 确保与后端字段一致
    title: "",
    span: 4,
    itemRender: {
      name: "$select",
      props: {
        placeholder: "请选择批次状态",
        options: [
          { label: "待上传", value: "-1" },
          { label: "待审核", value: "0" },
          { label: "审核中", value: "1" },
          { label: "审核完成", value: "2" }
        ]
      }
    }
  }
  
];
const formData = ref<{
  taxSourcesId: number;
  merchantsInfoId: number;
  merchantsAverageDealId: number,
  state: string,
}>(handleInitialFormParams());

const handleSearch = () => {
  reVxeGridRef.value.loadData();
};

const handleReset = () => {
  formData.value = handleInitialFormParams();
};

const createModalRef = ref();
const handleAdd = () => {
  createModalRef.value.showAddModal();
};
const handleEdit = (record: Recordable) => {
  createModalRef.value.showEditModal(record);
};

const handleDelete = async (record: Recordable) => {
  const type = await VxeUITable.modal.confirm("您确定要删除吗？");
  if (type == "confirm") {
    deleteData(record.id).then(() => {
      handleSearch();
    });
  }
};

const handleView = (record: Recordable) => {
  createModalRef.value.showViewModal(record);
};
const functions: Record<string, string> = {
  // add: "merchant.project.list.add",
  // edit: "merchant.project.template.edit",
  view: "merchant.management.index.view",
  delete: "merchant.management.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form
        ref="formRef"
        :data="formData"
        :items="formItems"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <template #state="{ data }">
          <el-select v-model="data.state" placeholder="请选择批次状态" style="width: 100%" >
            <el-option label="待上传" value="-1"></el-option>
            <el-option label="待审核" value="0"></el-option>
            <el-option label="审核中" value="1"></el-option>
            <el-option label="审核完成" value="2"></el-option>
          </el-select>
          </template>
        <template #timeRang="{ data }">
          <el-date-picker
            v-model="data.timeRang"
            clearable
            style="width: 100%"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </template>
      </vxe-form>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="getInfoList"
        :functions="functions"
        :searchParams="formData"
        :columns="columns"
        @handleAdd="handleAdd"
        @handleView="handleView"
        @handleDelete="handleDelete"
      />
    </el-card>
  </div>
</template>
